import React, { Component } from 'react';

import { connect } from 'react-redux';
import actions from '../../store/actions/action';

class SearchList extends Component {

    render() {
        let data = this.props.data.result;
        console.log(this.props);
        if (!data) return <></>;
        return <ul className="searchList">
            {data.songs.map((item, index) => {
                return <li className="listItem" key={Math.random()}>
                    <div className="td">
                        <div className="hd"><a></a></div>
                    </div>
                    <div className="td w0">
                        <div className="text">
                            <a className="name">{item.name}</a>
                            <span className="desc"> {item.alias[0] ? `-${item.alias[0]}` : null}</span>
                            {item.mvid ? <a className="mv"></a> : null}
                        </div>
                    </div>
                    <div className="td">
                        <div className="opt">
                            <a className="u-icn icn-add"></a>
                            <span className="icn icn-fav"></span>
                            <span className="icn icn-share"></span>
                            <span className="icn icn-dl"></span>
                        </div>
                    </div>
                    <div className="td w1">
                        <div className="text">
                            <a>{item.artists[0].name}</a>
                        </div>
                    </div>
                    <div className="td w2">
                        <div className="text">
                            <a className='s-fc3'>《{item.album.name}》</a>
                        </div>
                    </div>
                    <div className="td">{this.$api.changeTime(item.duration)}</div>
                </li>
            })}

        </ul>
    }
}

export default connect(state => state.search, null)(SearchList)